<template>
  <Layout class-prefix="layout">
    <NumberPad :value.sync="record.amount" @submit="saveRecord"/>
    <Tabs :data-source="typeList" :value.sync="record.type"/>
    <div class="notes1">
      <FormItem field-name="备注" placeholder="在这里输入备注" @update:value="onUpdateNotes"/>
    </div>
    <Tags @update:value="onUpdateTags"/>
  </Layout>
</template>

<script lang="ts">
import Vue from "vue";
import NumberPad from "@/components/Money/NumberPad.vue";
import FormItem from "@/components/Money/FormItem.vue";
import Tags from "@/components/Money/Tags.vue";
import {Component} from "vue-property-decorator";
import Tabs from "@/components/Tabs.vue";

@Component({
  components: {Tabs, Tags, FormItem, NumberPad},
  computed: {
    recordList() {
      return window.recordList;
    }
  }
})
export default class Money extends Vue {
  record: RecordItem = {
    tags: [], notes: "", type: "-", amount: 0
  };
  typeList = [
    {text: "支出", value: "-"},
    {text: "收入", value: "+"}
  ];

  onUpdateNotes(value: string) {
    this.record.notes = value;
  }

  saveRecord() {
    window.createRecord(this.record);
  }

  onUpdateTags(value:Tag[]) {
    this.record.tags = value;
  }
}
</script>

<style lang="scss">
.layout-content {
  display: flex;
  flex-direction: column-reverse;
}

.notes1 {
  padding: 12px 0;
}
</style>